{extend name="public:base" /}

{block name="left_nav"}
<div class="lb-nav">
    <a href="{:url('studyLogList')}" class="lbn-btn">学习记录</a>
    <a href="{:url('integralLogList')}" class="lbn-btn">我的积分</a>
    <a href="javascript: void(0)" class="lbn-btn active">错题本</a>
    <a href="{:url('weChatList')}" class="lbn-btn">微信讨论群</a>
</div>{/block}

{block name="main"}
<div class="mid-box" style="width: calc(100% - 300px);">

    <div class="mb-title">
        <div class="mbt-bt">错题本</div>
        <div class="divclear"></div>
    </div>

    <div class="mb-table">

        <table width="100%" border="0">
            <thead>
            <tr>
                <th scope="col" width="38%">问题</th>
                <th scope="col" width="15%">您的选择</th>
                <th scope="col" width="15%">正确选项</th>
                <th scope="col" width="16%">日期</th>
                <th scope="col" width="16%">操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list" id="vo"}
            <tr>
                <td>{$vo.question_text}</td>
                <td>{$vo.me_answer}</td>
                <td>{$vo.true_answer}</td>
                <td>{$vo.create_time|timeFormat}</td>
                <td>
                    <div class="mbt-bj" onclick="lookAnalyze('{$vo.id}')">问题解析</div>
                    <a href="{:url('delErrorTopicLog', ['id' => $vo.id])}" class="mbt-sc ajax-del">删除记录</a>
                </td>
            </tr>
            {/volist}
            </tbody>

        </table>

        <div id="page"></div>

    </div>

    {include file="public:footer" /}
</div>


<div class="divclear"></div>


<!--您的错题-->
<div class="tck-box analyze-box" style="width: calc(100% - 240px);display: none;">

    <div class="tb-nr">

        <div class="tbn-title">
            <div class="tbnt-bt">您的错题</div>
            <div class="tbnt-close">
                <img src="__STATIC__/index/images/icon_close.png"/>
            </div>
            <div class="divclear"></div>
        </div>

        <div class="tbn-tm">
            <div class="tbnt-wt">
                <p></p>
                <img src=""/>
            </div>
            <div class="tbnt-xx">

            </div>
            <div class="tbnt-jx">
                <div class="tbntj-bt">[ 正确答案 ]</div>
                <div class="tbntj-zq"></div>
                <div class="tbntj-bt">[ 答案解析 ]</div>
                <div class="tbntj-jx"></div>
            </div>
        </div>

        <div class="tbn-bottom">
            <div class="tbnb1 prev_topic">上一题</div>
            <div class="tbnb1 next_topic">下一题</div>
        </div>

    </div>

</div>{/block}

{block name="js"}
<script src="__STATIC__/index/js/renderPage.js"></script>
<script>
    var all_page = parseInt(`{$all_page}`)
    renderPage(all_page)

    var prev_id = 0;
    var next_id = 0;
    function lookAnalyze(id) {
        $('.analyze-box').show();
        var url = `{:url('topicInfo')}`

        $.post(url, {id}, res => {
            if (res.result == 1) {
                var data = res.data;

                // 问题
                $('.tbnt-wt p').html((data.style == 1 ? '[单选题]' : '[多选题]') + data.question.text ? data.question.text : '如图所示');
                if(data.question.img) $('.tbnt-wt img').attr('src', data.question.img);

                // 选项
                var option_html = '';
                data.option.forEach(val => {
                    var choose_img = val.choose_status == 0 ? 'icon_xx_default.png' : (val.choose_status == 1 ? 'icon_xx_correct.png' : 'icon_xx_error.png');
                    if (data.option_type == 1) {
                        // 文字选项
                        option_html += `<div class="tbntx-box">
                            <div class="tbntxb-an">
                                <img src="__STATIC__/index/images/${choose_img}"/>
                            </div>
                            <div class="tbntxb-zm">${val.key}.</div>
                            <div class="tbntxb-da">${val.value}</div>
                            <div class="divclear"></div>
                        </div>`;
                    } else {
                        // 图片选项
                        option_html += `<div class="tbntx-box">
                            <div class="tbntxb-an">
                                <img src="__STATIC__/index/images/${choose_img}"/>
                            </div>
                            <div class="tbntxb-zm">${val.key}.</div>
                            <div class="tbntxb-da"><img src="${val.value}"/></div>
                            <div class="divclear"></div>
                        </div>`;
                    }
                })
                $('.tbnt-xx').html(option_html);

                // 正确答案
                $('.tbntj-zq').html(data.true_answer);

                // 答案解析
                $('.tbntj-jx').html(data.analysis);

                // 上一题
                prev_id = data.prev_id;
                if(data.prev_id > 0){
                    $('.prev_topic').show();
                }else{
                    $('.prev_topic').hide();
                }
                // 下一题
                next_id = data.next_id;
                if(data.next_id > 0){
                    $('.next_topic').show();
                }else{
                    $('.next_topic').hide();
                }
            } else {
                layer.msg(res.msg);
            }
        }, 'JSON')
    }

    $(document).on('click', '.prev_topic', function (){
        lookAnalyze(prev_id)
    })

    $(document).on('click', '.next_topic', function (){
        lookAnalyze(next_id)
    })

    $('.tbnt-close').click(function(){
        $('.analyze-box').hide();
    })

</script>{/block}